<template>
    <div class="form-render-container">
        <div class="form-render" :class="[layoutType +'-layout']">
            <el-scrollbar :height="state.scrollHeight">
                <el-form
                    ref="formRef"
                    :label-position="labelPosition"
                    :label-width="labelWidth"
                    :size="labelSize"
                    :model="state.formModel"
                >
                    <template v-for="(item,index) in state.widgetList" :key="index">
                        <component
                            :is="getWidgetName(item)"
                            :designer="null"
                            :field="item"
                            :form-config="state.formConfig"
                            :form-model="state.formModel"
                        />
                    </template>

                    <el-button style="width: 100%;" type="primary" @click="submitForm">
                        提交
                    </el-button>
                </el-form>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import { reactive,onMounted,onUnmounted,computed, onBeforeMount,ref } from 'vue';
import { throttle } from 'lodash-es';
import { useRoute } from 'vue-router';

const route = useRoute()

const layoutType = computed(()=>route.params.type)

let widgetListBackup = JSON.parse(window.localStorage.getItem('widget__list__backup'))
let formConfigBackup = JSON.parse(window.localStorage.getItem('form__config__backup'))

const formRef = ref(null)
const state =reactive({
    scrollHeight:'0px',
    widgetList:widgetListBackup ?? [],
    formConfig:formConfigBackup ?? {},
    formModel:{}
})


const labelPosition = computed(()=>{
    if(!!state.formConfig && !! state.formConfig.labelPosition){ 
        return state.formConfig.labelPosition
    }
    return 'left'
})

const labelWidth = computed(()=>{
    return state.formConfig.labelWidth > 20 ? state.formConfig.labelWidth : 80
})

const labelSize = computed(()=>{
    return state.formConfig.size || ""
})

const getWidgetName = (element)=>{
    return 'xy-' + element.type
}
const setScrollHeihgt = throttle((e)=>{
    state.scrollHeight = e.target.innerHeight - 135 + 'px'
},300)

const buildDataFromWidget = (widget)=>{
    if (widget.category === 'container'){
        // 布局组件
    }else if(widget.formItemFlag) {
        if(!state.formModel.hasOwnProperty(widget.options.name)){
            // 不存在当前属性则添加
            state.formModel[widget.options.name] = widget.options.defaultValue
        }
    }
}

const buildFormModel = (widgetList)=>{
    widgetList.forEach(item=>{
        buildDataFromWidget(item)
    })
}

const submitForm = async()=>{
    if (!formRef.value) return
    await formRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

onBeforeMount(()=>{
    buildFormModel(state.widgetList)
})

onMounted(()=>{
    state.scrollHeight = window.innerHeight - 135 + 'px'
    window.addEventListener('resize',setScrollHeihgt)
})
onUnmounted(()=>{
    window.removeEventListener('resize',setScrollHeihgt)
})
</script>

<style lang='scss' scoped>
.form-render{
    width: calc(100% - 260px - 300px);
    min-height: calc(100vh - 54px - 39px - 40px - 2px - 11px);
    margin:25px auto;
    background-color: #f5f5f5;
    .el-scrollbar{
        width: 100%;
    }
    .el-form{
        padding: 5px 8px;
        overflow-y: overlay;
    }
}
.H5-layout{
    width: 350px;
    border-radius: 10px;
    //border-width: 10px;
    box-shadow: 0 0 1px 10px #495060;
}
</style>